<template>
  <div class="pxy20">
    <ElButton type="primary" @click="addArticle">新增案例</ElButton>

    <ElTable v-loading="loadshow" :data="list" border style="margin-top: 20px">
      <ElTableColumn label="序号" type="index" align="center" width="70" />
      <ElTableColumn label="案例名称" prop="title" align="center" />
      <ElTableColumn label="案例类别" prop="type" align="center" width="250" />

      <ElTableColumn label="学校" prop="school" width="200" align="center" />
      <ElTableColumn label="创建时间" prop="caseCreateTime" align="center" width="270" />
      <ElTableColumn label="操作" width="300">
        <template slot-scope="{ row }">
          <div>
            <ElButton type="primary" @click="edit(row)">编辑</ElButton>
            <el-popconfirm title="确定删除这篇文章吗？" @confirm="del(row)">
              <el-button slot="reference" style="margin-left: 5px" type="danger" icon="el-icon-delete">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { CASE_DEL, GET_CASE_LIST } from '@/api/ACAI/case'
import Pagination from '@/components/Pagination'
export default {
  name: 'CaseIndex',
  components: { Pagination },
  data() {
    return {
      loadshow: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        size: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loadshow = true
      GET_CASE_LIST(this.listQuery).then((res) => {
        const { total, rows } = res.data
        this.list = rows
        this.total = total
        this.loadshow = false
      })
    },
    addArticle() {
      this.$router.push({ name: 'caseEdit' })
    },
    edit(row) {
      this.$router.push({ name: 'caseEdit', params: row })
    },
    del(row) {
      const ids = row.id
      CASE_DEL({ ids }).then((res) => {
        const i = +res['result'] === 0
        this.$message({
          message: i ? '删除成功！' : '删除失败!' + res.msg,
          type: i ? 'success' : 'error'
        })
        i ? this.getList() : ''
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
